require(['./config'],()=>{
    require(['template','jquery','header','fly','zoom'],(template,jquery,header,)=>{//因为fly不遵循AMD规范所以没有返回值
        class Fying{
            // 
            constructor(){
                // 第一件事那根据地址的id去拿到浏览器的地址bom中的window.location对象
                // location对象指的地址栏的地址log出widow.location 出 search：id=‘’
                this.init().then(()=>{
                    this.addToCart()
                    this.zoom()
                })//意思是拿到承诺简单就是说值负责init请求数据渲染页面其他事情就不管了
                // 交给then去调用      
            }
            init(){
                const id = window.location.search.slice(4) //得到？ID=2 我们只要2所以要去掉id？=
                // 字符串截取slice从第4开始截取到末尾 
                // console.log(id);
                // 异步的代码改造成同步的形式
                // 套路return new Promise
                return new Promise((resolve,reject)=>{
                    $.get('http://rap2api.taobao.org/app/mock/244978/qiuqiu',{ id },resp=>{
                        console.log(resp);
                        if(resp.code == 200){
                            const list = resp.body.list
                            console.log(list);
                            //...detail展开把id带进去最后构成一个新对象复制给this.detail
                            this.list = {...list,id}
                            console.log(this.list)
                            $('#git').html(template('idming',{...this.list}))
                           
                            
                            //展开把里面所有的数据传进去
                            // 异步改造成同步 
                            // 代表异步成功 承诺兑现
                            resolve()
                        }
                    })
                })
               
                // 根据id请求后端接口拿到当前商品的详细数据
            }
            addToCart(){
                // 购物车
                $('#gouwu').on('click',(e)=>{ //需要穿fly
                    this.fly(e)
                    // 把当前的详情数据加入购物车
                    // localStorage
                    // set存get取
                    let cart = window.localStorage.getItem('cart')//2
                    console.log(cart);
                    if(cart){//3//判断是否有会话地址
                    // 商品会重复以上 判断商品已经存放进了购物车用smoe有一个满足就行
                     cart = JSON.parse(cart)//数组
                     console.log(this.list.id);
                     const isExist = cart.some( shop =>{//遍历
                        return shop.id === this.list.id
                      
                     
                     })
                     if(isExist){
                        //  判断商品是否已在购物车存在 
                        // 只需要吧count加1就行了
                        //map映射返回新的数组
                        cart = cart.map(shop=>{ 
                           if(shop.id === this.list.id){
                            shop.count++
                           }
                            return shop
                        })
                        
                     }else{
                        //  商品不存在的时候
                        cart.push({...this.list,count:1,check:true
                        })
                       
                        // 不管if还是else最后都要都要存一次s
                     }
                     window.localStorage.setItem('cart',JSON.stringify(cart))
                        // push的把之前的覆盖掉
                        // window.localStorage.setItem('cart',JSON.stringify(cart))  
                    }else{
                        // 把当前商品放进数组里，存进去
                        window.localStorage.setItem('cart',JSON.stringify([{...this.list, count:1,check:true}]))//1
                    }  
                    // 意思你有setItem存cart名值为list
                    // localStorage不能存对象所以json格式的字符串在页面APPlication中查看
                    // 先把购物车信息取出来
                })
            }
            fly (e) {
                $(`<img style="width: 40px; height: 40px; border-radius: 50%;" src="${this.list.src[0]}">`).fly({
                  start:{
                    left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                    top: e.clientY,  //开始位置（必填）
                  },
                  end:{
                    left: $('.guwuc').offset().left, //结束位置（必填） //加你重点的id或者class 
                    top: $('.guwuc').offset().top,  //结束位置（必填）
                    // width: 100, //结束时高度
                    // height: 100, //结束时高度
                  },
                  // autoPlay: false, //是否直接运动,默认true
                  speed: 0.7, //越大越快，默认1.2
                  vertex_Rtop: 20, //运动轨迹最高点top值，默认20
                  onEnd: function(){
                    console.log('end')
                    // 移出DOM
                    this.destroy()
                  } //结束回调
                })
              }
            zoom(){//放大镜
                $('.zoom-img').elevateZoom({
                    // 指定小图容易的id就是ul 
                    gallery:'gal1'
                })
            }
        }
        new Fying
    })
})